<template>
  <div class="share-creater-chrome-plugin-content-base">
    <div class="selected-image-area" v-if="showCollectionImg">
      <div class="select-top">
        <div class="title">
          <span @click="toWeb">Share Creators</span>
        </div>
        <div class="exit" @click="exit">
          <i class="el-icon-close"></i>
        </div>
      </div>
      <div class="select-images">
        <div
          class="image-item"
          v-for="item in selectImagesMockData"
          :key="item.src"
        >
          <img :src="item.src" :id="'saveImg' + new Date().getTime()" alt="" />
          <div class="lebal">{{ item.width }} x {{ item.height }}</div>

          <div class="save-btn" @click="saveimg(item)">采集</div>
        </div>
      </div>
    </div>
    <DragUploadLayer></DragUploadLayer>
    <SaveFolderDlg v-if="$isOpen('SaveFolderDlg')"></SaveFolderDlg>
    <LoginPluginDlg v-if="$isOpen('LoginPluginDlg')"></LoginPluginDlg>
    <CustomCapture></CustomCapture>
  </div>
</template>

<script>
import { initConfig } from "@/contentUtils/init";
import {
  saveUrl,
  captureArea,
  batchSave,
  captureEntire,
  captureVisible,
  collectionImageApi
} from "@/contentUtils/screenShot";
import { startRecordScreen } from "@/contentUtils/startRecordScreen";
//组件
import SaveFolderDlg from "./SaveFolderDlg";
import LoginPluginDlg from "./LoginPluginDlg";
import DragUploadLayer from "./DragUploadLayer";
import CustomCapture from './CustomCapture/index.vue'
import {
  getDefaultImageFormatStyle
} from "@/logics/shortcutkey";
export default {
  name: "Content",
  components: {
    SaveFolderDlg,
    DragUploadLayer,
    LoginPluginDlg,
    CustomCapture
  },
  data() {
    return {
      selectImagesMockData: [],
      showCollectionImg: false,
      loading: true
    };
  },
  methods: {
    pluginInit() {
      initConfig();
    },
    async dealKeyDown(params) {
      console.log(params);
    },
    // 开始截屏
    handleCaptureScreen() {},
    // 事件注册中心
    eventBusOn() {
      console.log("注册事件中心");
      this.$EventBus.$on("content-save-url-shortcut", this.saveUrlShortcut);
      this.$EventBus.$on("content-start-record-screen", startRecordScreen);
      this.$EventBus.$on(
        "content-capture-entire-shortcut",
        this.captureEntireShortcut
      );
      this.$EventBus.$on(
        "content-capture-visible-shortcut",
        this.captureVisibleShortcut
      );
      this.$EventBus.$on(
        "content-capture-area-shortcut",
        this.captureAreaShortcut
      );
      this.$EventBus.$on("content-batch-save-shortcut", this.batchSaveShortcut);

      this.$EventBus.$on("keyDown", this.dealKeyDown);
    },
    // 事件销毁中心
    eventBusOff() {
      console.log("销毁事件中心");
      this.$EventBus.$off("content-save-url-shortcut", this.saveUrlShortcut);
      this.$EventBus.$off("content-start-record-screen", startRecordScreen);
      this.$EventBus.$off(
        "content-capture-entire-shortcut",
        this.captureEntireShortcut
      );
      this.$EventBus.$off(
        "content-capture-visible-shortcut",
        this.captureVisibleShortcut
      );
      this.$EventBus.$off(
        "content-capture-area-shortcut",
        this.captureAreaShortcut
      );
      this.$EventBus.$off(
        "content-batch-save-shortcut",
        this.batchSaveShortcut
      );

      this.$EventBus.$off("keyDown", this.dealKeyDown);
    },
    saveUrlShortcut() {
      saveUrl();
    },
    captureEntireShortcut() {
      captureEntire();
    },
    captureVisibleShortcut() {
      captureVisible();
    },
    captureAreaShortcut() {
      captureArea();
    },
    batchSaveShortcut() {
      this.selectImagesMockData = batchSave();
      if (this.selectImagesMockData.length > 0) {
        this.showCollectionImg = true;
      }
    },
    toWeb() {
      window.location.href = "http://sharecreators.com";
    },
    exit() {
      console.log("退出批量采集模式");
      this.showCollectionImg = false;
      this.selectImagesMockData = [];
    },
    async saveimg(item) {
      const img = new Image();
      img.setAttribute("crossOrigin", "Anonymous");
      img.src = item.src;

      const saveSuccessCallBack = function () {
        console.log("上传成功");
      };
      img.onload = async function () {
        let canvas = document.createElement("canvas");
        let ctx = canvas.getContext("2d");
        canvas.width = item.width;
        canvas.height = item.height;
        ctx.drawImage(img, 0, 0, item.width, item.height);
        let formatStyle = 'image/' + (await getDefaultImageFormatStyle())
        let url = canvas.toDataURL(formatStyle);
        collectionImageApi(url, saveSuccessCallBack);
      };
    }
  },
  created() {
    this.pluginInit();
    this.eventBusOn();
  },
  beforeDestroy() {
    this.eventBusOff();
  }
};
</script>
<style lang="scss">
  .el-message-index{
    z-index: 1000000 !important;
    top: 100px !important;
  }
</style>
<style scoped lang="scss">
.saveCurrentImg {
  padding: 5px 10px;
  background-color: #00a289;
  cursor: pointer;
  position: fixed;
  top: 20px;
  left: 20px;
  z-index: 999;
}



.selected-image-area {
  position: fixed;
  z-index: 1000;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  display: flex;
  flex-direction: column;
  background-color: rgba(229, 229, 229, 0.95);

  .select-top {
    height: 50px;
    width: 100%;
    background: rgba(23, 186, 161, 0.5);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 4px;
    display: flex;
    .title {
      text-align: center;
      line-height: 50px;
      flex: 1;
      color: #303133;
      font-size: 14px;

      span {
        cursor: pointer;
        user-select: none;
      }
    }

    .exit {
      width: 50px;
      height: 50px;
      border-left: 1px #fff solid;
      color: #303133;
      cursor: pointer;
      line-height: 50px;
      text-align: center;
      user-select: none;
    }
  }

  .select-images {
    flex: 1;
    // display: flex;
    // justify-content: space-evenly;
    // flex-wrap: wrap;
    overflow: auto;
    .image-item {
      float: left;
      position: relative;
      max-width: 200px;
      max-height: 250px;
      background-color: pink;
      box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px;
      background: white;
      transition: left 0.3s ease-in-out 0s, top 0.3s linear 0s;
      margin-right: 10px;
      margin-bottom: 10px;
      .loading {
        position: absolute;
        z-index: 100;
        top: 0px;
        bottom: 0px;
        left: 0px;
        right: 0px;
        background-color: pink;
      }
      img {
        width: 100%;
      }

      .lebal {
        font-size: 12px;
        color: #999999;
        text-align: center;
      }

      .save-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50% , -50%);
        height: 28px;
        width: 50px;
        line-height: 28px;
        text-align: center;
        cursor: pointer;
        box-shadow: rgba(255, 255, 255, 0.2) 0px 0px 0px 2px;
        font-size: 13px;
        color: #fff;
        border-radius: 2px;
        background: rgb(23, 186, 161);
        user-select: none;
        display: none;

        &:active {
          opacity: 0.7;
        }
      }

      &:hover {
        .save-btn {
          display: block;
        }
      }
    }
  }
}
</style>